<template>
    <div class="news-view">
        <div class="news-list-nav">
            <el-input placeholder="请输入内容" v-model="input" style="max-width: 1200px" @keyup.enter.native="handSearch">
                <!--<el-select v-model="select" slot="prepend" placeholder="请选择">-->
                <!--<el-option label="站内" value="1"></el-option>-->
                <!--<el-option label="实时" value="2"></el-option>-->
                <!--</el-select>-->
                <el-button slot="append" icon="search" @click="handSearch"></el-button>
            </el-input>
            <!--<div style="margin-top: 10px">-->
                <!--<router-link v-if="page > 1" :to="'/' + type + '/' + (page - 1)">&lt; prev</router-link>-->
                <!--<a v-else class="disabled">&lt; prev</a>-->
                <!--<span>{{ page }}/{{ maxPage }}</span>-->
                <!--<router-link v-if="hasMore" :to="'/' + type + '/' + (page + 1)">more &gt;</router-link>-->
                <!--<a v-else class="disabled">more &gt;</a>-->
            <!--</div>-->
        </div>
        <div class="news-list" v-if="items">
            <transition-group tag="ul" name="fade">
                <item v-for="(item,index) in items" :key="index" :item="item" :index="index">
                </item>
            </transition-group>
        </div>
    </div>
</template>

<script>
    import item from "./Item.vue"
    export default {
        name: 'item-view',
        data () {
            return {input: ''}
        },
        components: {item},
        computed: {
            items: function () {
                return this.$store.state.news.newsList
            }
        },
        methods: {
            handSearch(){
                this.items.splice(0, this.items.length);
                this.$store.dispatch('findNewsPage', {key: this.input})
            }
        }
    }
</script>

<style lang="stylus">

    .fade-enter-active, .fade-leave-active
        transition all .2s ease

    .fade-enter, .fade-leave-active
        opacity 0

    .news-view
        padding-top 45px

    .news-list-nav, .news-list
        background-color #fff
        border-radius 2px

    .news-list-nav
        padding 15px 30px
        position fixed
        text-align center
        top 55px
        left 0
        right 0
        z-index 998
        box-shadow 0 1px 2px rgba(0, 0, 0, .1)
        a
            margin 0 1em
        .disabled
            color #ccc

    .news-list
        position absolute
        margin 30px 0
        width 100%
        transition all .5s cubic-bezier(.55, 0, .1, 1)
        ul
            list-style-type none
            padding 0
            margin 0

    .fade-enter-active, .fade-leave-active
        transition all .5s ease

    .fade-enter, .fade-leave-active
        opacity 0

    .item-move, .item-enter-active, .item-leave-active
        transition all .5s cubic-bezier(.55, 0, .1, 1)

    .item-enter
        opacity 0
        transform translate(30px, 0)

    .item-leave-active
        position absolute
        opacity 0
        transform translate(30px, 0)

    @media (max-width 600px)
        .news-list
            margin 10px 0
</style>
